@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 260 50% 10%;
    --foreground: 0 0% 98%;
    --card: 260 50% 8%;
    --card-foreground: 0 0% 98%;
    --popover: 260 50% 8%;
    --popover-foreground: 0 0% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 280 65% 60%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 310 65% 60%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --radius: 0.5rem;
  }

  .light {
    --background: 220 20% 97%;
    --foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 280 65% 60%;
    --secondary-foreground: 210 40% 98%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 310 65% 60%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* 俄罗斯方块特定样式 */
.tetris-container {
  touch-action: manipulation;
}

.tetris-block {
  transition: all 0.1s ease;
}

.tetris-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(20, 1fr);
  gap: 1px;
  background: linear-gradient(135deg, rgba(30, 30, 60, 0.8) 0%, rgba(60, 30, 90, 0.8) 100%);
  box-shadow: inset 0 0 20px rgba(120, 80, 200, 0.3);
}

.tetris-cell {
  aspect-ratio: 1/1;
  border-radius: 4px;
  transition: all 0.15s ease;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2);
}

.tetris-cell.bg-\[\#00f0f0\] { /* I方块 */
  box-shadow: 0 0 8px rgba(0, 240, 240, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-cell.bg-\[\#0000f0\] { /* J方块 */
  box-shadow: 0 0 8px rgba(0, 0, 240, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-cell.bg-\[\#f0a000\] { /* L方块 */
  box-shadow: 0 0 8px rgba(240, 160, 0, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-cell.bg-\[\#f0f000\] { /* O方块 */
  box-shadow: 0 0 8px rgba(240, 240, 0, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-cell.bg-\[\#00f000\] { /* S方块 */
  box-shadow: 0 0 8px rgba(0, 240, 0, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-cell.bg-\[\#a000f0\] { /* T方块 */
  box-shadow: 0 0 8px rgba(160, 0, 240, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-cell.bg-\[\#f00000\] { /* Z方块 */
  box-shadow: 0 0 8px rgba(240, 0, 0, 0.6), inset 0 0 4px rgba(255, 255, 255, 0.4);
}

.tetris-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  background: linear-gradient(135deg, rgba(30, 30, 60, 0.6) 0%, rgba(60, 30, 90, 0.6) 100%);
  border-radius: 8px;
  padding: 4px;
}

/* 彩色背景 */
.tetris-bg {
  background: linear-gradient(135deg, #2a1b4d 0%, #44107a 100%);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 彩色粒子背景 */
.tetris-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.tetris-particle {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  animation: float 15s infinite ease-in-out;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-60px) rotate(180deg);
    opacity: 0.4;
  }
  100% {
    transform: translateY(0) rotate(360deg);
    opacity: 0.8;
  }
}

@media (max-width: 640px) {
  .tetris-controls button {
    @apply p-4;
  }
}